<template>
	<div>
	   <el-tag  class="tag">未拥有权限</el-tag>
	  <el-table
	    :data="notOwnerList"
	    style="width: 100%;margin-bottom: 20px;"
	    row-key="id"
	    border
	    default-expand-all
	    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
	    <el-table-column
	      prop="permissionName"
	      label="权限名称"
	      width="300px">
	    </el-table-column>
	    <el-table-column
	      prop="url"
	      label="权限路由"
	      width="240px">
	    </el-table-column>
	    <el-table-column
	      prop="roleNames"
	      label="权限对应角色名称">
	    </el-table-column>
	    <el-table-column
	      prop="adminUsernames"
	      label="拥有该权限的管理员">
	    </el-table-column>

	    <el-table-column  label="操作" width="350px" align="center">
	      <template slot-scope="scope">
	        <el-button type="primary"  size="mini"  @click="distributionPermission(scope.row.id)">授权该权限</el-button>
	      </template>
	    </el-table-column>
	  </el-table>


    <el-tag type="success" class="tag">已拥有权限</el-tag>
    <el-table
      :data="ownerList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="permissionName"
        label="权限名称"
        width="300px">
      </el-table-column>
      <el-table-column
        prop="url"
        label="权限路由"
        width="240px">
      </el-table-column>
      <el-table-column
        prop="roleNames"
        label="权限对应角色名称">
      </el-table-column>
      <el-table-column
        prop="adminUsernames"
        label="拥有该权限的管理员">
      </el-table-column>

      <el-table-column  label="分配权限" width="350px" align="center">
        <template slot-scope="scope">
          <el-button type="primary"  size="mini"  @click="notDistributionPermission(scope.row.id)">取消授权</el-button>
        </template>
      </el-table-column>
    </el-table>
	</div>
</template>

<script>
  import permission from'@/api/permission/permission'
  export default {
    data() {
      return {
       roleId:0,
       notOwnerList:[],
       ownerList:[]
    }
    },
    created() {
       if(this.$route.params && this.$route.params.id){
           this.roleId=this.$route.params.id
           this.getOwnerPermissionListByRoleId()
           this.getNotOwnerPermissionListByRoleId()
       }
    },
    methods: {
      //查询已经拥有的角色
     getOwnerPermissionListByRoleId(){
       permission.getRolePermission(this.roleId)
       .then(response=>{
         this.ownerList=response.data.list
       })
     },
     //查询未拥有的角色
     getNotOwnerPermissionListByRoleId(){
       permission.getRoleNotOwnedPermissionByRoleId(this.roleId)
       .then(response=>{
         this.notOwnerList=response.data.list
       })
     },
     //授权
     distributionPermission(permissionId){
       permission.distributionPermission(this.roleId,permissionId,this.notOwnerList)
       .then(response=>{
         this.$message({
           type: 'success',
           message: '分配成功!'
         });
         this.getOwnerPermissionListByRoleId()
         this.getNotOwnerPermissionListByRoleId()
       })
     },
     //取消授权
    notDistributionPermission(permissionId){
      permission.notDistributionPermission(this.roleId,permissionId,this.ownerList)
      .then(response=>{
        this.$message({
          type: 'success',
          message: '取消授权成功!'
        });
        this.getOwnerPermissionListByRoleId()
        this.getNotOwnerPermissionListByRoleId()
      })
    }
    }
  }
</script>

<style>
  .tag{
    display: flex;
    justify-content: center;
  }
</style>
